<template>
  <div class="circle-index-content">
    <back-bar title="生活圈" @toBack="toBack" />
    <van-sticky :offset-top="50">
      <public-friend-circle />
    </van-sticky>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="aloading"
        :finished="finished"
        @load="onLoad"
        :immediate-check="false"
        finished-text="我也是有底线的"
      >
        <van-skeleton
          title
          avatar
          :row="2"
          :loading="false"
          v-for="item of allDynamicList"
          :key="item.id"
        >
          <div class="circle-box">
            <show-public-content
              :publicUserInfo="item.authorUser"
              :context="item.context"
              :publicDynaTime="item.dynaTime | showTime"
            />
            <show-public-img :imgList="item.images" />
            <div v-if="sonRefresh">
            <!-- <div> -->
              <dian-zan :dynaId="item.id" :dynaUserId="item.userId" />
              <common :dynaId="item.id" @toGetDynamicCooment="toGetDynamicCooment"/>
            </div>
          </div>
        </van-skeleton>
      </van-list>
    </van-pull-refresh>
    <div v-show="hidshow">
      <div class="backtop-box" v-show="heightToTop > 1500" @click="backTop">
        <van-icon name="back-top" />
      </div>
    </div>
    <tab-bar v-show="hidshow" />
  </div>
</template>

<script>
import TabBar from "components/common/tabbar/TabBar";
import BackBar from "@/components/conten/backbar/BackBar";

import ShowPublicImg from "./feriendcirclechildcomps/ShowPublicImg";
import ShowPublicContent from "./feriendcirclechildcomps/ShowPublicContent";
import PublicFriendCircle from "./feriendcirclechildcomps/PublicFriendCircle";
import DianZan from "./feriendcirclechildcomps/DianZan";
import Common from "./feriendcirclechildcomps/Common";

import { getAllDynamic } from "network/dynamic";

import { changeTime } from "common/utils";

export default {
  name: "frindcircle",
  components: {
    TabBar,
    BackBar,
    PublicFriendCircle,
    ShowPublicContent,
    ShowPublicImg,
    DianZan,
    Common,
  },
  data() {
    return {
      pageNum: 0,
      pageSize: 10,
      size: 0,
      loading: true,
      isLoading: false,
      allDynamicList: [],
      sonRefresh: true,
      aloading: false,
      finished: false,
      publicDynaTime: "",
      docmHeight: document.documentElement.clientHeight, //默认屏幕高度
      showHeight: document.documentElement.clientHeight, //实时屏幕高度
      hidshow: true, //显示或者隐藏footer,
      isResize: false, //默认屏幕高度是否已获取
      heightToTop: 0,
      visible: false,
      interval: null,
    };
  },
  methods: {
    //点击返回
    toBack() {
      this.$router.back();
    },
    //下拉刷新
    onRefresh() {
      this.toGetDynamicCooment()
      this.size = 0;
      this.pageNum = 1;
      let pageNum = this.pageNum;
      let pageSize = this.pageSize;
      console.log(this.pageNum);
      getAllDynamic({ pageNum, pageSize }).then((res) => {
        if (res.code == 200) {
          this.allDynamicList = res.data.list;
          this.sonRefresh = false;
          this.$nextTick(() => {
            this.sonRefresh = true;
          });
          setTimeout(() => {
            this.$toast({
              message: "刷新成功",
              position: "bottom",
            });
            this.isLoading = false;
            this.finished = false;
          }, 500);
        } else {
          this.$toast({
            message: "刷新失败",
            position: "bottom",
          });
          this.isLoading = false;
        }
      });
    },
    //上拉加载更多
    onLoad() {
      this.toGetAllDynamic();
    },
    //封装生活圈数据的请求 上拉加载的
    toGetAllDynamic() {
      this.pageNum = this.pageNum + 1;
      let pageNum = this.pageNum;
      let pageSize = this.pageSize;
      console.log(this.pageNum);
      getAllDynamic({ pageNum, pageSize }).then((res) => {
        this.size++;
        console.log(res);
        this.allDynamicList.push(...res.data.list);
        this.aloading = false;
        if (this.size >= res.data.lastPage) {
          this.finished = true;
        }
      });
    },
    //第二次进来的时候刷新,
    onRefreshAgain() {
      this.size = 0;
      this.pageNum = 1;
      let pageNum = this.pageNum;
      let pageSize = this.pageSize;
      console.log(this.pageNum);
      getAllDynamic({ pageNum, pageSize }).then((res) => {
        if (res.code == 200) {
          this.allDynamicList = res.data.list;
          this.sonRefresh = false;
          this.$nextTick(() => {
            this.sonRefresh = true;
          });
          this.isLoading = false;
          this.finished = false;
        } else {
          this.$toast({
            message: "刷新失败",
            position: "bottom",
          });
          this.isLoading = false;
        }
      });
    },
    //监听屏幕到顶部的距离
    handleScrollx() {
      this.heightToTop = window.pageYOffset - 0;
    },
    backTop() {
      let distanceY = window.pageYOffset;
      let i = 0;
      this.interval = setInterval(() => {
        let next = Math.floor(
          this.easeInOutQuad(10 * i, distanceY, -distanceY, 500)
        );
        if (next <= 0) {
          window.scrollTo(0, 0);
          clearInterval(this.interval);
        } else {
          window.scrollTo(0, next);
        }
        i++;
      }, 17);
      this.onRefresh();
    },
    easeInOutQuad(t, b, c, d) {
      // 判断当前时间是否总在总时间的一半以内，是的话执行缓入函数，否则的话执行缓出函数
      if ((t /= d / 2) < 1) {
        return (c / 2) * t * t + b;
      } else {
        // 将总长度设置为一半，并且时间从当前开始递减，对图像进行垂直向上平移
        return (-c / 2) * (--t * (t - 2) - 1) + b;
      }
    },
    toGetDynamicCooment(){
      console.log(123);
    }
  },
  mounted() {
    this.loading = false;
    window.onresize = () => {
      return (() => {
        if (!this.isResize) {
          //默认屏幕高度
          this.docmHeight = document.documentElement.clientHeight;
          this.isResize = true;
        }
        //实时屏幕高度
        this.showHeight = document.body.clientHeight;
        console.log(this.showHeight);
      })();
    };
    //监听到屏幕顶部的距离
    window.addEventListener("scroll", this.handleScrollx, true);
  },
  created() {
    this.toGetAllDynamic();
  },
  filters: {
    showTime(val) {
      //当前的时间
      return changeTime(val);
    },
  },
  watch: {
    showHeight() {
      if (this.docmHeight >= this.showHeight) {
        this.hidshow = false;
      } else {
        this.hidshow = true;
      }
      console.log(this.hidshow);
    },
  },
};
</script>

<style scoped>
.circle-index-content {
  padding-top: 50px;
  padding-bottom: 50px;
}
.circle-box {
  margin-bottom: 20px;
}
.backtop-box {
  position: fixed;
  bottom: 60px;
  right: 15px;
  height: 40px;
  width: 40px;
  border-radius: 40px;
  font-size: 20px;
  line-height: 45px;
  text-align: center;
  background-color: #ff5654;
  color: #fff;
}
</style>